<template>
    <div>
        <div class="page-main ">
            <i-button @click.native="lastPage" :disabled="page.current <= 1" level="info">上一页</i-button>
            <!-- <el-button @click="lastPage" :disabled="current <= 1">上一页</el-button> -->
            <div style="height: 40px;line-height: 40px;color: #FF6900;font-weight: 600;">{{page.current}}/{{ computedPage }}</div>
            <!-- <el-button @click="nextPage" :disabled="current>=computedPage">下一页</el-button> -->
            <i-button  @click.native="nextPage" :disabled="page.current>=computedPage" level="info">下一页</i-button>
        </div>
        
    </div>
</template>

<script>
import IButton from '@/components/plugs/i-button/IButton.vue';

export default{
  
    data(){


        return{

            page:{
                current:1,
                size:10,
                total:0
            }

        }
    },
    props:{
        current:{
            type:Number,
            default:1
        },
        size:{
            type:Number,
            default:0
        },
        total:{
            type:Number,
            default:0
        }
    },
    methods:{
        lastPage(){
            if(this.page.current>1){
                this.page.current--;
                this.$emit('change-page',{current:this.page.current,size:this.page.size,total:this.page.total});
                
            }
            
            
        },
        nextPage(){
            if(this.page.current<this.computedPage){
                this.page.current++
                this.$emit('change-page',{current:this.page.current,size:this.page.size,total:this.page.total});
                
            }
            
        }
    },
    components:{
        IButton
    },
    created(){
        this.page.current = this.current;
        this.page.size = this.size;
        this.page.total = this.total;

        // console.log('page',this.page);

    },
    computed:{
        computedPage(){
            if(this.page.total == 0){
                return 1;
            }else{
                let page = this.page.total/this.page.size;
                
                return Math.ceil(page);
            }
            
        }
    },
    watch:{
        current:function(newValue,oldValue){
            this.page.current = newValue;
        },
        size:function(newValue,oldValue){
            this.page.size = newValue;

        },
        total:function(newValue,oldValue){
            this.page.total = newValue;
        }
    }
}

</script>

<style scoped>

.page-main{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}

</style>